<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员发送通知</title>
    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/weuix.css"/>
    <link rel="icon" href="favicon.png"> <link rel="icon" href="favicon.ico">
    <script src="/js/zepto.min.js"></script>
    <script src="/js/jquery-1.9.1.js"></script>
    <style>
        .container {
            /* width: 100%; */
            /* margin: 20px 20px 0 20px; */
            box-sizing: border-box;
            /* background-color: pink; */
        }

        .title {
            background: url("img/title.png") no-repeat;
            background-size: contain;
            height: 82px;
            background-size: 100% 83px;
            background-position: 18px 0;
            /* width: 100%; */
        }

        body {
            background-color: #f4f4f4; 
        }

        .content {
            width: 90%;
            margin: 0 auto;
            height: 25%;
            margin-top: 10px;
            border-radius: 3px;
            margin-bottom: 30px;
        }

        .send {
            width: 90%;
            margin: 0 auto;
         
    
        }

        .send a {
            background-color: #027aff;
        }

        .weui-icon-checked {
            /* background-color: #027aff; */
            color: #027aff;
           
        }

        .weui-cells_checkbox {
            width: 90%;
            margin: 0 auto;
            border: none;
           
        }

       

        .icon {
            color: #027aff

        }

        .icon-19 {
            padding-right: 5px;
        }

        .middle {
            margin: 20px auto;
            width: 90%;
    
            border-radius: 3px;
            background-color: #fff;
        }

        .sendTo {
            font-weight: 400;
            line-height: 38px;
            padding-left: 20px;
            color: black;
            font-family: '微软雅黑';
        }

        .border {
            border: solid 1px #027aff !important;
        }

        .weui-icon_msg {
            font-size: 34px;
            text-align: center;
            padding-left: 50%;
            box-sizing: border-box;
        }

        .flex1 {
            margin-top: 40px;
            flex: 1;
            vertical-align: text-top;
        }

        .flex2 {
            margin-top: 44px;
            flex: 4;

        }

        .weui-msg__title {
            margin-bottom: 5px;
            font-weight: 400;
            font-size: 16px;
            word-wrap: break-word;
            word-break: break-all;
        }




        .weui-header {
            background-color: #f4f4f4;
            font-weight: bold;
            font-size: 16px;
        }
        /* 标题 */
        .weui-header-title {
            color: black !important;

        }







    </style>
</head>
<body>


    <div class="container">

        <!-- 头部 -->
        <div class="weui-header ">
            <div class="weui-header-left"> <a   class="icon icon-109 f-black" th:href='@{/admin/return_management_page(admin_token=${adminToken})}'>返回</a>  </div>
            <h1 class="weui-header-title"></h1>
        </div>

        <div class="title">
        </div>
        <div class="weui-cells weui-cells_form content" tabindex="1">
            <div class="weui-cell hh">
                <div class="weui-cell__bd">
                    <textarea id="textarea" class="weui-textarea" placeholder="请输入通知内容" rows="3" onkeyup="textarea(this);"></textarea>
                   
                </div>
            
            </div>
        </div>




        <div class="weui-cell__bd send" id="send">
            <a href="javascript:;" class="weui-btn bg-blue login_buttom">发&nbsp;送</a>
        </div>




        <div class="weui-flex" id="success_icon" style="display: none">
            <div class="weui-flex__item flex1"><div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>

            </div>
            <div class="weui-flex__item flex2"> <div class="weui-msg__text-area">
                <h2 id="success_msg" class="weui-msg__title">发送成功</h2>

            </div></div>
        </div>



        <div class="weui-flex" id="error_icon" style="display: none">
            <div class="weui-flex__item flex1"><div class="weui-msg__icon-area"><i class="weui-icon-warn  weui-icon_msg"></i></div>
            </div>
            <div class="weui-flex__item flex2"><div class="weui-msg__text-area">
                <h2 class="weui-msg__title" id="error_msg">发送失败， 发送内容不能为空</h2>
            </div></div>
        </div>


    <!--存储jwt_token-->
    <input id="jwtToken" name="jwtToken" type="hidden" th:value="${adminToken}">



        <script>





    $(".content").click(
                function () {
                    $(this).addClass("border");
                }
            );

   $(".content").blur(
       function() {
           $(this).removeClass("border");
       }
   )





    // 发送消息：
   $("#send").click(
       function (e) {
           let content = $("#textarea").val();
           let jwt_token = $("#jwtToken").val();





           // 表单校验：
           if (content == ""){
               $("#error_icon").show();
               $("#error_msg").html("文本不能为空")
               setTimeout(function(){$("#error_icon").hide()}, 3500);
               return
           }


           var data = {

               "content":content,
               "admin_token":jwt_token
           }

           alert(data.content)

           alert(data.admin_token)






           $.ajax({
               url: "/admin/send",
               data:JSON.stringify(data),
               contentType:"application/json",
               type:"POST",
               dataType:"json",
               success: function(result){

                   if(result.flag === true) {
                       $("#success_icon").show();
                       $("#success_msg").html(result.message)
                       setTimeout(function(){$("#success_icon").hide()}, 3500);
                   }else {
                       $("#error_icon").show();
                       $("#error_msg").html(result.message)
                       setTimeout(function(){$("#error_icon").hide()}, 3500);
                   }

               },
               error:function (e) {
                   alert("cuole")
                   alert(e)

                   console.log(e);

               }
           });
       }
   );





      
    
    </script>
        
</body>
</html>